<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="card shadow">
    <div class="card-header bg-warning text-dark">
        <h5 class="mb-0">编辑农产品信息</h5>
    </div>
    <div class="card-body">
        <c:if test="${not empty errorMessage}">
            <div class="alert alert-danger mb-4">
                <i class="fas fa-exclamation-triangle me-2"></i>${errorMessage}
            </div>
        </c:if>

        <form action="products?action=update" method="post">
            <input type="hidden" name="id" value="${product.id}">

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">产品名称 <span class="text-danger">*</span></label>
                    <input type="text" name="name"
                           value="${product.name}"
                           class="form-control"
                           required
                           placeholder="输入产品名称">
                </div>

                <div class="col-md-3">
                    <label class="form-label">单价（元） <span class="text-danger">*</span></label>
                    <input type="number" name="price"
                           step="0.01"
                           min="0.01"
                           value="<fmt:formatNumber value="${product.price}" type="number" minFractionDigits="2" maxFractionDigits="2"/>"
                           class="form-control"
                           required
                           placeholder="0.00">
                </div>

                <div class="col-md-3">
                    <label class="form-label">库存数量 <span class="text-danger">*</span></label>
                    <input type="number" name="stock"
                           value="${product.stock}"
                           min="0"
                           class="form-control"
                           required
                           placeholder="0">
                </div>

                <div class="col-12">
                    <label class="form-label">产品描述</label>
                    <textarea name="description"
                              class="form-control"
                              rows="4"
                              placeholder="请输入产品详细描述">${product.description}</textarea>
                </div>

                <div class="col-12">
                    <label class="form-label">产品图片URL</label>
                    <div class="input-group">
                        <input type="url" name="imageUrl"
                               value="${product.imageUrl}"
                               class="form-control"
                               placeholder="https://example.com/image.jpg">
                        <button type="button" class="btn btn-outline-secondary"
                                onclick="previewImage(this.previousElementSibling.value)">
                            预览图片
                        </button>
                    </div>
                    <div id="imagePreview" class="mt-2">
                        <c:if test="${not empty product.imageUrl}">
                            <img src="${product.imageUrl}"
                                 alt="产品预览图"
                                 class="img-thumbnail"
                                 style="max-height: 200px;">
                        </c:if>
                    </div>
                </div>

                <div class="col-12 mt-4">
                    <div class="d-flex justify-content-end gap-2">
                        <a href="products" class="btn btn-secondary">
                            <i class="fas fa-times me-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-2"></i>保存修改
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // 图片预览功能
    function previewImage(url) {
        const previewDiv = document.getElementById('imagePreview');
        previewDiv.innerHTML = url ?
            `<img src="${url}" alt="图片预览" class="img-thumbnail" style="max-height: 200px;">` :
            '<div class="text-muted">暂无图片</div>';
    }
</script>
